<template>
  <div class="film-detail" v-if="filmDetail.name" @scroll="scrollEvent">
    <div class="film-detail-header">
      <van-sticky  :class={sticky:hasSticky}>
        <img src="../../assets/img/news-left.png" alt="" @click="goBack" />
        <span class="title" :class="{display:!hasSticky}">{{filmDetail.name}}</span>
      </van-sticky>
    </div>
    <div class="film-detail-poster">
        <img :src="filmDetail.poster" alt="">
    </div>
    <div class="film-detail-content  pb5">
        <div class="spaceBetween mt8">
            <div class=" ml6">
                <span class="fz18">{{filmDetail.name}}</span>
                <span class="bgc ml6 fz14">{{filmDetail.filmType.name}}</span>
            </div>
            <span class="fz16 mr8">{{filmDetail.grade}}分</span>
        </div>
        <div class="category">{{filmDetail.category}}</div>
        <div class="time">{{moment.unix(filmDetail.premiereAt).format("M月D日星期d")}} 上映</div>
        <div class="nation">{{filmDetail.nation}}|{{filmDetail.runtime}}分钟</div>
        <div class="synopsis ellipsisTwo fz14">{{filmDetail.synopsis}}</div>
    </div>
    <div class="film-detail-actors">
        <div class="fz16 ml16 mt16 mb15">演职人员</div>
        <swiper :options="swiperOptions" class="fz12">
          <swiper-slide class="fx" v-for="(item,index) in filmDetail.actors" :key="index">
            <div><img :src="item.avatarAddress" alt="" /></div>
            <div class="mt6 mb6">{{item.name}}</div>
            <div>{{item.role}}</div>
          </swiper-slide>
        </swiper>
    </div>
    <div class="film-detail-photos">
        <div class="spaceBetween">
            <span>剧照</span> 
            <span>全部></span>
        </div>
         <swiper :options="swiperOptions1">
          <swiper-slide v-for="item in filmDetail.photos" :key="item">
            <div><img :src="item" alt=""/></div>
          </swiper-slide>
        </swiper>
    </div>
    <div class="film-detail-purchase">
        <van-button type="primary" size="large" color="#ff5f16" @click="toFilmCinemas">选座购票</van-button>
    </div>

</div>

</template>

<script>

export default {
  name: "filmDetails",
  data() {
    return {
      // 粘性定位的控制
      hasSticky:false,
      filmId: 5601,
      filmDetail: "",
      swiperOptions: {
          slidesPerView:3,
          spaceBetween:20,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true,//修改swiper的父元素时，自动初始化swiper
      },
      swiperOptions1: {
          slidesPerView:2,
          spaceBetween:20,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true,//修改swiper的父元素时，自动初始化swiper
      },
    };
  },
  created() {
    this.filmId = this.$route.params.id;
    let that = this;
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.film.info",
        },
        params: {
          filmId: that.filmId,
          k: 4132178,
        },
      })
      .then((res) => {
        that.filmDetail = res.data.data.film;
        that.$store.commit("saveFilmInfo",res.data.data.film)
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    toFilmCinemas(){
      this.$router.push({
        path:this.$route.path+'/cinemas'
      })
    },
    scrollEvent(e){
      let top = e.target.scrollTop;
      if(top>50){
        this.hasSticky=true;
      }else if(top<50){
        this.hasSticky=false;
      }
    },
    goBack() {
      this.$router.back();
    },
   
  },
};
</script>

<style scoped lang="scss">
.display{
  display: none;
}
.sticky{
  position: fixed;
  top:0;
  color: red;
  background-color: #fff;
  width: 100%;
  z-index: 99;

}
.film-detail {
    position: relative;
    height: 100%;
    overflow: auto;
    &-header{
      position: relative;
      z-index: 9;
        position: absolute;
        top: 0;
      
        height: 44px;
        line-height: 44px;
        img{
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            margin-right: 26%;
        }
    }
    &-poster{
        height: 180px;
    }
    &-content{
        height: 189px;
        border-bottom: 10px solid rgb(244,244,244);
        div{
            margin-left: 8px;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        .spaceBetween{  
            .bgc{
                background-color: rgba(0,0,0,0.2);
                font-style: italic;
            }
        }
        .synopsis{     
            margin-bottom: 10px;
        }
    }
    &-actors{
        padding-bottom: 6px;
        border-bottom: 10px solid rgb(244,244,244);
        img{
            width: 86px;
            height: 102px;
        }
        .fx{
            flex-direction: column;
            align-items: center;
        }
    }
    &-photos{
        margin-bottom: 10px;
        border-bottom: 10px solid rgb(244,244,244);
        padding-bottom: 50px;
        .spaceBetween{
            margin: 10px;
        }
        img{
            width: 150px;
            height: 100px;
            margin-left: 6px;
            margin-right: 6px;
        }
    }
    &-purchase{
        position:fixed;
        height: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        
    }
}
</style>